<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/style.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/icons-vue/dist/style_icon.css" />
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@next"></script>
  <!-- 引入NutUI组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui/dist/nutui.umd.js"></script>
</head>

<body>
  <div id="app">
    <nut-cell is-link url="https://m.jd.com">跳转 https://m.jd.com</nut-cell>
    <nut-button loading type="primary" @click="showAddress">{{text}}</nut-button>

    <nut-uploader> </nut-uploader>

    <nut-input-number v-model="value"></nut-input-number>

    <nut-address v-model:visible="showPopup" :province="province" :city="city" type="custom2" :country="country"
      :town="town" @change="onChange" @close="close" custom-address-title="请选择所在地区"></nut-address>
  </div>
  <script>
    // 在 #app 标签下渲染一个按钮组件
    const app = Vue.createApp({
      data() {
        return {
          value: 1,
          showPopup: true,
          province: [
            { id: 1, name: "北京", title: 'B' },
            { id: 2, name: "广西", title: 'G' },
            { id: 3, name: "江西", title: 'J' },
            { id: 4, name: "四川", title: 'S' },
          ],
          city: [
            { id: 7, name: "朝阳区", title: 'C' },
            { id: 8, name: "崇文区", title: 'C' },
            { id: 9, name: "昌平区", title: 'C' },
            { id: 6, name: "石景山区", title: 'S' },
          ],
          country: [
            { id: 3, name: "八里庄街道", title: 'B' },
            { id: 9, name: "北苑", title: 'B' },
            { id: 4, name: "常营乡", title: 'C' },
          ],
          town: [],
          text: "请选择地址",
          modify_id: -1,
          modify_index: -1,
          tasks: [],
        };
      },
      methods: {
        showAddress() {
          this.showPopup = !this.showPopup;
        },

        onChange(cal) {
          const name = this[cal.next];
          if (name.length < 1) {
            this.showPopup = false;
          }
        },
        close(val) {
          this.text = val.data.addressStr;
        },
      },
    });

    const Home = { template: `<h1>Contenuto Home</h1>` };
    const About = { template: `<h1>Contenuto About</h1>` };
    const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
    const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

    const routes = [
      { path: "/", component: Home },
      { path: "/about", component: About },
      { path: "/portfolio", component: Portfolio },
      { path: "/contatti", component: Contatti }
    ];

    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes
    })

    app.use(router);
    app.use(nutui);
    // 调用函数组件，弹出一个 Toast
    // nutui.Toast("NutUI 3.0");
    app.mount("#app");
  </script>
</body>

</html>